<template>
    <div class="container">

        <div @click="goHome" class="circle">
            <van-icon class="rou" name="arrow-left" />
        </div>
        <div class="login_all">
            <van-form @submit="onSubmit">

                <!-- 用户名 -->
                <van-field class="user" v-model="username" name="用户名" label="用户名" />

                <!-- 密码 -->
                <van-field class="pwd" v-model="password" type="password" name="密码" label="密码"
                    :rules="[{ required: true, message: '请填写密码' }, { pattern: /^\w{6,}$/, message: '密码不少于6位' }]" />

                <!-- 登录 -->
                <div class="btn_login" style="margin: 16px auto;">
                    <van-button class="btn" round block native-type="submit">登录&nbsp;&nbsp;&nbsp;
                        <van-icon name="down" style="transform: rotateZ(270deg);" />
                    </van-button>
                </div>

            </van-form>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            password: ''
        };
    },
    methods: {
        onSubmit() { // 点击登录
            const url = "/login"
            const params = `username=${this.username}&password=${this.password}`
            this.axios.post(url, params).then((res) => {
                console.log(res.data);
                if(res.data.code===200){
                    this.$router.push("/home")
                }else{
                    alert("用户名或密码错误！")
                }
            })
        },

        goHome() {
            this.$router.push('/');
        }
    },
};
</script>

<style>
.container {
    position: relative;
    height: 100vh;
    background: url("../assets/bgc_image.jpg") no-repeat;
    background-size: 100%;
}

.rou {
    position: absolute;
    padding: 5vw;
    background-color: #fff;
    border-radius: 50%;
    top: 5vw;
    left: 5vh;
    font-size: 5vw;
    color: #944e12;
}

.btn_login {
    position: relative;
    width: 40%;
    top: 64vh;
    left: 20vw;
}

.user,
.pwd {
    width: 80vw;
    left: 50%;
    transform: translate(-50%);
    top: 60vh;
    border: 1px solid rgb(168, 168, 168);
    border-radius: 20px;
}

.user {
    margin-bottom: 5vh;
}

.btn_login .btn {
    color: #fff;
    background-image: linear-gradient(to right, #fb745c, #f98037, #ef8a14);
    border: none;
    box-shadow: 0px 1px 10px 1px #c36a04;
}
</style>